<template>
  <div class="diskInfoWrap">
    <el-form
        :model="searchParams"
        size="small"
        label-width="100px"
        :class="dateWidth ? 'gt1200':'lt1200'"
    >
      <el-row :gutter="20">
        <el-col :span="7">
          <el-form-item label="商品和服务税收分类合并编码:" label-width="175px">
            <el-input
                v-model="searchParams.sphfwssflhbbm"
                placeholder="请输入"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="商品和服务名称:">
            <el-input
                v-model="searchParams.sphfwmc"
                placeholder="请输入"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="商品和服务分类简称:" label-width="140px">
            <el-input
                v-model="searchParams.sphfwfljc"
                placeholder="请输入"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <div style="float: right;">
            <el-button type="primary" size="small" @click="onSubmit">
              查询
            </el-button>
            <el-button type="primary" size="small" @click="onResize">
              重置
            </el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <div class="body">
      <div class="body_button">
        <el-button type="primary" size="small" @click="update" icon="el-icon-upload" v-if="hasAuth('VMS_DIFFERENTIAL_CODE_ADD')">获取差额征税编码信息</el-button>
        <el-button type="primary" size="small" @click="getRecord">获取记录</el-button>
      </div>
    </div>
    <div class="table_list">
      <tableList
          border
          ref="tableRef"
          :heightMin="155"
          :keySet="keySet"
          :autoHeight="true"
          :tableData="tableData1"
          :paginationShow="true"
          :pageNumber="pages.current"
          :pageSize="pages.size"
          :total="pages.total"
          @handleSizeChange="handleSizeChange"
          @handleCurrentChange="handleCurrentChange"
      >
        <template #sfkycekp="{row}">
          <el-tag v-if="row.sfkycekp == 'Y' " type="success">是</el-tag>
          <el-tag v-else type="danger">否</el-tag>
        </template>
        <template #cekpsfkykzp="{row}">
          <el-tag v-if="row.cekpsfkykzp == 'Y' " type="success">是</el-tag>
          <el-tag v-else type="danger">否</el-tag>
        </template>
        <template #qekpsfkykzp="{row}">
          <el-tag v-if="row.qekpsfkykzp == 'Y' " type="success">是</el-tag>
          <el-tag v-else type="danger">否</el-tag>
        </template>
      </tableList>
    </div>
    <vxe-modal
        v-model="historyDialog"
        title="获取记录"
        width="900"
        min-width="900"
        height="600"
        resize
        remember
        fullscreen
    >
      <template v-slot>
        <history
            ref="history"
            v-if="historyDialog"
        ></history>
      </template>
    </vxe-modal>
  </div>

</template>

<script>
import mixinTable from "@/mixin/mtable";
import TableList from "@/components/tableList/index.vue";
import {getData, getPage} from "@/api/differentialTaxCode";
import History from "@/views/differentialTaxCode/history.vue"
import getHistoryCom from "@/views/baseInfo/components/getHistory.vue";

export default {
  name: 'differentialTaxCode',
  components: {getHistoryCom, TableList, History},
  mixins: [mixinTable],
  computed: {
    dateWidth() {
      return this.$store.state.viewWidth > 1200
    }
  },
  data() {
    return {
      tableData1: [],
      keySet: [
        {
          label: '商品和服务税收分类合并编码',
          englishName: 'sphfwssflhbbm',
          width: 180
        },
        {
          label: '商品和服务名称',
          englishName: 'sphfwmc',
          width: 400
        },
        {
          label: '商品和服务分类简称',
          englishName: 'sphfwfljc',
          width: 150
        },
        {
          label: '是否可以差额开票',
          englishName: 'sfkycekp',
          isSlot: true,
          slotName: 'sfkycekp',
          align: 'center',
          width: 140
        },
        {
          label: '差额开票是否可以开专票',
          englishName: 'cekpsfkykzp',
          width: 160,
          isSlot: true,
          slotName: 'cekpsfkykzp',
          align: 'center'
        },
        {
          label: '全额开票是否可以开专票',
          englishName: 'qekpsfkykzp',
          width: 160,
          isSlot: true,
          slotName: 'qekpsfkykzp',
          align: 'center'
        },
        {
          label: '一般纳税人税率',
          englishName: 'ybnsrsl',
          align: 'center',
          width: 150
        },
        {
          label: '一般纳税人征收率',
          englishName: 'ybnsrzsl',
          align: 'center',
          width: 150
        },
        {
          label: '小规模纳税人征收率',
          englishName: 'xgmnsrzsl',
          align: 'center',
          width: 150
        }
      ],
      historyDialog: false
    }
  },
  mounted() {
    this.getPage();
  },
  methods: {
    async getPage() {
      let param = {
        pageNo: this.pages.current,
        pageSize: this.pages.size,
        ...this.searchParams
      }
      const {code, msg, data} = await getPage(param);
      if (code == 200) {
        this.tableData1 = data.records;
        this.pages.total = data.total;
        this.pages.current = data.current;
        this.pages.size = data.size;
      }
    },
    onSubmit(){
      this.pages.current = 1;
      this.getPage()
    },
    onResize() {
      this.searchParams = {
        sphfwfljc: "",
        sphfwmc: "",
        sphfwssflhbbm: ""
      }
      this.getPage();
    },
    async update() {
      this.$confirm('是否调用接口获取差额征税编码?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // 更新
        const {code} = await getData();
        if (code == 200) {
          await this.getPage();
        } else {
          this.$message({
            type: 'error',
            message: msg
          });
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消更新'
        });
      });
    },
    getRecord() {
      this.historyDialog = true
    },
    handleSizeChange(val) {
      this.pages.current = 1;
      this.pages.size = val;
      this.getPage();
    },
    handleCurrentChange(val) {
      this.pages.current = val;
      this.getPage();
    },
  }
}
</script>

<style scoped lang="scss">
@import '@/style/variables.scss';

.diskInfoWrap {
  box-sizing: border-box;
  // padding: 10px;
  .head {
    display: flex;
    height: 18px;
    align-items: center;

    .colCLas {
      width: 4px;
      height: 100%;
      background-color: $allBg;
      margin-right: 12px;
    }

    .info {
      height: 100%;
      display: flex;
      align-items: center;
    }
  }

  .body {
    padding-top: 10px;
  }

  .table_list {
    padding-top: 10px;
    width: 100%;
  }

  .gt1200 {
    ::v-deep .el-date-editor--datetimerange.el-input__inner {
      width: 100%;
      max-width: 600px;
    }
  }

  .lt1200 {
    ::v-deep .el-input.el-date-editor--daterange, .el-input__inner.el-date-editor--daterange, .el-input.el-date-editor--timerange, .el-input__inner.el-date-editor--timerange {
      width: 100%;
    }
  }
}
</style>